<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="24">
        <el-select v-model="value" class="padding" placeholder="请选择" @change="changSelect">
          <el-option v-for="item in selectData" :key="item.value" :label="item.label" :value="item.value"
            @click.native="labelClick(item.label)" />
        </el-select>
        <el-radio-group v-model="radio1" class="padding" @change="changeRadio1">
          <el-radio-button label="0"> 日分时线 </el-radio-button>
          <el-radio-button label="1">
            时统计线
          </el-radio-button>
          <el-radio-button label="2">
            日统计线
          </el-radio-button>
        </el-radio-group>
        <el-date-picker v-model="value2" type="daterange" align="right" unlink-panels range-separator="至"
          start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd"
          class="padding" @change="changeChartAndPick()" />
      </el-col>
    </el-row>

    <el-row v-loading="loading" style="background: #fff; padding: 16px 16px 0; margin: 24px 0">
      <div>压力(MPa)</div>
      <line-chart :chart-data="lineChartData" />
    </el-row>
  </div>
</template>
<script>
import {
  findAllName,
  getChartData,
  getDayChartData,
  getMonChartData,
} from "@/api/analysis/gwreal";
import LineChart from "./components/LineChart.vue";
import { getNDay } from "@/api/water/reportMonth"
import { getNDayReport } from "@/api/water/reportDay1"
import { getRealDataList } from "@/api/water/realData"
import { parseTime } from "@/utils/ruoyi";

const lineChartData = {
  name: '压力(MPa)',
  actualData: [0.47, 0.473, 0.474, 0.47, 0.47, 0.473, 0.47],
  xAxis: [
    "03-03 11:18",
    "03-03 11:20",
    "03-03 11:22",
    "03-03 11:24",
    "03-03 11:26",
  ],
};

export default {
  name: "gwreal",
  components: {
    LineChart,
  },
  data() {
    return {
      value: "a14",
      label: "1#出厂水流量",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value2: [],
      startTime: "",
      endTime: "",
      chartData: { startTime: "", endTime: "" },
      radio1: "0",
      loading: false,
      selectData: [
        {
          label: "1#出厂水流量",
          value: "a14"
        },
        {
          label: "2#出厂水流量",
          value: "a16"
        },
        {
          label: "1#出厂水浊度",
          value: "a30"
        },
        {
          label: "2#出厂水浊度",
          value: "a33"
        },
        {
          label: "2#出厂水余氯",
          value: "a34"
        },
        {
          label: "1#出厂水余氯",
          value: "a31"
        },
        {
          label: "1#出厂水PH值",
          value: "a32"
        },
        {
          label: "2#出厂水PH值",
          value: "a35"
        },
        {
          label: "1#出厂水压力",
          value: "a36"
        },
        {
          label: "2#出厂水压力",
          value: "a37"
        },
      ],
      lineChartData: lineChartData,
      actualLineData: lineChartData,
      dayChartQuery: {
        tabl: "DR2",
        lable: ""
      }
    }
  },
  beforeCreate() { },

  created() {
    this.initChartDataTime(1); // 初始化一天数据
  },

  mounted() {
    this.minute();
  },
  methods: {
    // 初始化日期范围
    initPicker(n) {
      let date = new Date();
      let date2 = new Date();
      date.setTime(date.getTime() + 3600 * 1000 * 24);
      date2.setTime(date.getTime() - 3600 * 1000 * 24 * n);
      let startTime =
        date2.getFullYear() +
        "-" +
        (date2.getMonth() + 1) +
        "-" +
        date2.getDate();
      let endTime =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      this.value2 = [startTime, endTime];
      this.chartData.startTime = startTime
      this.chartData.endTime = endTime
    },

    openAlert() {
      this.$message.error("当前日期没有数据，请重新选择");
    },
    minute() {
      this.loading = true
      if (this.value2 !== []) {
        let { tabl, lable } = this.dayChartQuery
        lable = this.value
        getRealDataList(tabl, lable).then((response) => {
          let data = response.data
          let chart = { name: this.label, actualData: [], xAxis: [] };
          for (let i = 0; i < data.length; i++) {
            let data1 = data[i].value.toFixed(3);
            let time = this.parseTime(data[i].rtime, "{h}:{i}");
            chart.actualData.push(data1);
            chart.xAxis.push(time);
          }
          this.lineChartData = chart;
          this.loading = false;
        })
      } else {
        this.$message.error("请重新选择日期");
        this.loading = false;
      }
    },
    hour() {
      this.loading = true
      if (this.value2 !== []) {
        this.chartData.startTime = this.value2[0];
        this.chartData.endTime = this.value2[1];
        getNDayReport(this.chartData).then((response) => {
          let data = response.data
          let chart = { name: this.label, actualData: [], xAxis: [] };
          for (let i = 0; i < data.length; i++) {
            let data1 = data[i][this.value].toFixed(3);
            let time = this.parseTime(data[i].rtime, "{m}-{d} {h}");
            chart.actualData.push(data1);
            chart.xAxis.push(time);
          }
          this.lineChartData = chart;
          this.loading = false;
          return { chart };
        })
      }
      else {
        this.$message.error("请重新选择日期");
        this.loading = false;
      }
    },
    day() {
      this.loading = true
      if (this.value2 !== []) {
        this.chartData.startTime = this.value2[0];
        this.chartData.endTime = this.value2[1];
        getNDay(this.chartData).then((response) => {
          let data = response.data
          let chart = { name: this.label, actualData: [], xAxis: [] };
          for (let i = 0; i < data.length; i++) {
            let data1 = data[i][this.value].toFixed(3);
            let time = this.parseTime(data[i].rtime, "{m}-{d}");
            chart.actualData.push(data1);
            chart.xAxis.push(time);
          }
          this.lineChartData = chart;
          console.log(chart)
          this.loading = false;
          return { chart };
        })
      }
      else {
        this.$message.error("请重新选择日期");
        this.loading = false;
      }
    },

    initChartDataTime(n) {
      // 初始化图标日期范围
      let date = new Date();
      let date2 = new Date();
      date.setTime(date.getTime() + 3600 * 1000 * 24);
      date2.setTime(date.getTime() - 3600 * 1000 * 24 * n);
      this.chartData.startTime =
        date2.getFullYear() +
        "-" +
        (date2.getMonth() + 1) +
        "-" +
        date2.getDate();
      this.chartData.endTime =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      // console.log(this.chartData.startTime)
      this.value2 = [this.chartData.startTime, this.chartData.endTime];
    },
    changeChartAndPick() {
      switch (true) {
        case this.radio1 === "0":
          this.minute();
          break
        case this.radio1 === "1":
          this.hour();
          break
        case this.radio1 === "2":
          this.day();
          break
      }
    },
    changSelect() {
      switch (true) {
        case this.radio1 === "0":
          this.minute();
          break
        case this.radio1 === "1":
          this.hour();
          break
        case this.radio1 === "2":
          this.day();
          break
      }
    },
    changeRadio1() {
      switch (true) {
        case this.radio1 === "0":
          this.minute();
          break
        case this.radio1 === "1":
          this.hour();
          break
        case this.radio1 === "2":
          this.day();
          break
      }
    },
    labelClick(data) {
      console.log(data);
      this.label = data
    },

    // number类型不足n位前补足0
    PrefixZero(num, n) {
      return (Array(n).join("0") + num).slice(-n);
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;
}

.padding {
  margin: 0 20px 2px 0;
}
</style>
